<template>
  <div>
    <BasicModal @register="registerModal" v-bind="$attrs">
      <SimpleForm ref="formRef" :formProps="state.formProps" :formModel="state.formModel" />
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { buildOption } from '/@/utils/helper/designHelper';

  const state = reactive({
    formProps: {},
    formModel: {},
  });

  const formRef = ref();

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    state.formModel = {};
    state.formProps = buildOption(JSON.parse(data.formJson).formJson, false);
    setModalProps({
      confirmLoading: false,
      draggable: false,
      title: data.title,
      destroyOnClose: true,
      showOkBtn: false,
      showCancelBtn: false,
      width: 800,
    });
  });
</script>
